<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="登录地址">
                <el-input v-model="loginAddress" placeholder="请输入登录地址"></el-input>
            </el-form-item>
            
            <el-form-item label="用户名称">
                <el-input v-model="username" placeholder="请输入用户名称"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-select v-model="status" placeholder="请选择状态">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="成功" value="success"></el-option>
                    <el-option label="失败" value="fail"></el-option>
                </el-select>
            </el-form-item>

            <el-date-picker v-model="loginTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            <el-button type="primary" @click="search" style="margin-bottom: 20px;">
                <el-icon style="margin-right: 10px;"><Search /></el-icon>搜索
            </el-button>
        </el-form>
        
        <el-button type="primary" v-perm:management:salesorder:insert="insert">添加</el-button>
        <el-button type="primary" v-perm:management:salesorder:update="update">修改</el-button>
        <el-button type="primary" v-perm:management:salesorder:remove="remove">删除</el-button>
        <el-button type="primary" @click="bulkDelete" :disabled="selectedRows.length === 0">批量删除</el-button>

        <el-table :data="salesorder" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="orderNo" label="访问编号" width="150"></el-table-column>
            <el-table-column prop="username" label="用户名称" width="150"></el-table-column>
            <el-table-column prop="browser" label="浏览器" width="150"></el-table-column>
            <el-table-column prop="loginLocation" label="登录地点" width="150"></el-table-column>
            <el-table-column prop="loginAddress" label="登录地址" width="150"></el-table-column>
            <el-table-column prop="os" label="操作系统" width="150"></el-table-column>
            <el-table-column prop="logstatus" label="登录状态" width="100"></el-table-column>
            <el-table-column prop="msg" label="操作信息" width="150"></el-table-column>
            <el-table-column prop="loginTime" label="登录日期" width="150"></el-table-column>
            
        </el-table>
        
        <el-dialog :destroy-on-close="true" :title="title" v-model="visible" style="width: 1250px;">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router'

const data = ref({})
const visible = ref(false)
const title = ref('')

const insert = (p) => {
    visible.value = true
    title.value = p.cname
    router.push(p.path)
}

const update = (p) => {
    visible.value = true
    title.value = p.cname
    router.push(p.path)
}

// 初始化状态（设置默认值）
const loginAddress = ref('')
const username = ref('')
const status = ref('')
const loginTime = ref('')

// 示例订单数据
const salesorder = ref([
    {
        orderNo: '123456',
        username: 'admin',
        browser: 'Chrome',
        loginLocation: '127.0.0.1',
        loginAddress: '127.0.0.1',
        os: 'Windows',
        logstatus: 'success',
        msg: '登录成功',
        loginTime: '2021-01-01 12:00:00'
    },
    {
        orderNo: '654321',
        username: 'admin',
        browser: 'Chrome',
        loginLocation: '127.0.0.1',
        loginAddress: '127.0.0.1',
        os: 'Windows',
        logstatus: 'fail',
        msg: '登录失败',
        loginTime: '2021-01-01 12:00:00'
    }
]);

const selectedRows = ref([]);

const handleSelectionChange = (val) => {
    selectedRows.value = val;
};

const bulkDelete = () => {
    if (confirm("确定要删除选中的订单吗？")) {
        salesorder.value = salesorder.value.filter(order => !selectedRows.value.includes(order));
        selectedRows.value = []; // 清空选中项
    }
};

// 单行删除方法
const deleteSingle = (row) => {
    if (confirm("确定要删除该订单吗？")) {
        salesorder.value = salesorder.value.filter(order => order.orderNo !== row.orderNo);
    }
};
</script>

<style scoped>
.el-select {
    width: 150px;
}
</style>
